<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body_head"></view>
		<view class="video-container" @tap="toggleVideoPlay">
			<view class="custom-pause" v-if="!isPlaying">
				<image src="/static/images/play.png" style="width: 150rpx; height: 150rpx" />
			</view>
			<!-- 视频播放组件 -->
			<video
				class="fullscreen-video"
				:src="classInfo.videoUrl"
				:autoplay="false"
				:loop="true"
				:controls="false"
				:show-center-play-btn="false"
				objectFit="cover"
				id="videoPlayer"
				ref="videoPlayer"
				@timeupdate="onTimeUpdate"
				@loadedmetadata="onLoadedMetaData"
			>
				<!-- 视频封面 -->
				<!-- <image v-if="showPoster" class="video-poster" :src="videoData.poster" mode="aspectFill" /> -->
			</video>
			<view class="progress-bar" v-show="!isPlaying" @touchstart="handleProgressTouchStart" @touchmove.prevent="handleProgressTouchMove" @touchend="handleProgressTouchEnd">
				<view class="bar-background">
					<view class="current-progress" :style="{ width: dragging ? tempProgress + '%' : progress + '%' }"></view>
				</view>
				<view class="time-display">
					<text>{{ formatTime(dragging ? tempTime : currentTime) }}</text>
					<text>{{ formatTime(duration) }}</text>
				</view>
			</view>
			<!-- 信息覆盖层 -->
			<view class="overlay-layer">
				<!-- 顶部横幅 -->
				<view class="banner-box">
					<!-- 		<text class="banner-text">深色礼品袋纸有要的大哥请留言</text>
					<view class="blur-background"></view> -->
				</view>
				<!-- 左侧用户信息 -->
				<view class="user-info">
					<text class="username">@{{ classInfo.title }}</text>
					<!-- <text class="timestamp">34分钟前</text> -->
					<view class="tags">
						<text class="tag">{{ classInfo.contentInfo }}</text>
					</view>
				</view>
				<!-- 右侧互动栏 -->
				<view class="interaction-column">
					<!-- 头像 -->
					<image class="avatar" :src="classInfo.fileListPic[0].fileUrl" />
					<!-- 互动按钮组 -->
					<view class="action-item">
						<image @tap.stop="handleLike(0)" v-if="classInfo.likeFlag != 1" class="icon" src="/static/images/collect1.png" />
						<image @tap.stop="handleLike(1)" v-else class="icon" src="/static/images/like1.png" />
						<text class="count">{{ classInfo.likeCount }}</text>
					</view>
					<view class="action-item" @tap.stop="toggleComment">
						<image class="icon icon2" src="/static/images/message1.png" />
						<text class="count">{{ classInfo.commentCount }}</text>
					</view>
					<view class="action-item" @tap.stop="handleCollect">
						<image class="icon" src="/static/images/share.png" />
						<!-- 隐藏的分享按钮 -->
						<button @tap="handShareCountAdd" open-type="share" class="hidden-share-btn" :data-item="shareData" @tap.stop></button>
						<text class="count">{{ classInfo.shareCount ? classInfo.shareCount : 0 }}</text>
					</view>
				</view>
			</view>
			<!-- 评论抽屉 -->
			<!-- 替换原有comment-drawer为uni-popup实现 -->
			<uni-popup
				ref="commentPopup"
				type="bottom"
				:safe-area="false"
				:mask-click="true"
				@touchmove.stop.prevent="moveHandle"
				@mask-click="handleMaskClick"
				:height="250"
				class="comment-popup-wrapper"
				@tap.stop
			>
				<view style="height: 800rpx" class="comment-drawer" @tap.stop>
					<view class="comment-header">
						<u-subsection
							fontSize="14"
							activeColor="#19E820"
							bgColor="#ffffff"
							mode="button"
							keyName="name"
							@change="sectionChange"
							:list="tabList"
							:current="curNow"
						></u-subsection>
					</view>
					<!-- 滚动评论区域 -->
					<scroll-view scroll-y class="comment-list">
						<view class="comment-wrap" v-if="curNow == 0">
							<view v-for="(item, index) in commentList" :key="index" class="comment-item">
								<image class="avatar" @tap="lookMarket(item.briefUserInfo.userId)" :src="item.briefUserInfo.avatar" />
								<view class="content">
									<view
										class="content-item"
										@touchstart="handleTouchStart"
										@touchend="handleTouchEnd"
										@touchcancel="handleTouchEnd"
										@longpress.prevent="handleLongPress(item)"
									>
										<text class="username">{{ item.briefUserInfo.nickName }}</text>
										<text class="time">{{ item.createTime }}</text>
										<text class="text">{{ item.commentInfo }}</text>
									</view>
									<view v-if="item.expanded">
										<view
											v-for="(item1, index1) in item.children"
											:key="index1"
											@touchstart="handleTouchStart"
											@touchend="handleTouchEnd"
											@touchcancel="handleTouchEnd"
											@longpress.stop="handleLongPress(item1)"
											class="child-content"
										>
											<view class="c-head">
												<view class="c-cover">
													<image class="avatar" @tap="lookMarket(item1.briefUserInfo.userId)" :src="item1.briefUserInfo.avatar" />
												</view>
												<view class="c-name">
													{{ item1.briefUserInfo.nickName }}
													<text>{{ item1.createTime }}</text>
												</view>
											</view>
											<view class="c-content">
												{{ item1.commentInfo }}
											</view>
										</view>
									</view>
									<!-- 展开按钮 -->
									<view v-show="item.children.length > 0" class="expand-btn" @tap="handleExpand(item, index)">
										<text>{{ item.expanded ? '收起' : '展开' }}{{ item.children.length }}条回复</text>
										<text class="arrow">{{ item.expanded ? '▲' : '▼' }}</text>
									</view>
								</view>
								<view class="c-btn">
									<text @tap="handleReply(item)">回复</text>
								</view>
							</view>
						</view>
						<view class="like-wrap" v-if="curNow == 1">
							<view v-for="(item, index) in likeList" :key="index" class="comment-item">
								<image class="avatar" @tap="lookMarket(item.userId)" :src="item.avatar" />
								<view class="content">
									<text class="username">{{ item.nickName }}</text>
									<view class="like-time">
										<text class="time">{{ item.customDate }}</text>
										<text class="text">{{ item.province ? item.province : '未知' }}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 输入框区域 -->
					<view class="input-area" v-if="curNow == 0">
						<input
							@blur="onInputBlur"
							v-model="conmment"
							:placeholder="commentName ? '回复@' + commentName : '请输入内容'"
							:focus="inputFocus"
							class="comment-input"
							clearable
						/>
						<button class="send-btn" @tap="handleSend">发送</button>
						<!-- <image src="/static/images/send.png" @tap="submitComment" class="send-btn" /> -->
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
import { mapState } from 'vuex'; // 关键导入
const api = require('../../util/api.js');
export default {
	components: {
		CustomNavbarTwo
	},
	data() {
		return {
			dragging: false,
			tempProgress: 0,
			tempTime: 0,
			startX: 0,
			progressWidth: 0,
			keyboardHeight: 0, // 新增键盘高度监听
			hasInputContent: false, // 标记是否有输入
			inputFocus: false, // 控制输入框聚焦
			commentName: '',
			shareData: {
				title: '分享标题',
				path: '/page/study/detail'
				// imageUrl: '/static/share.jpg'
			},
			scrollHeight: 0, // 动态计算高度
			// 新增数据项
			currentTime: 0,
			duration: 0,
			progress: 0,
			isPlaying: true,
			showPoster: true,
			showComment: false,
			showPoll: true,
			isLiked: false,
			likeCount: 235,
			isCollected: false,
			collectCount: 89,
			commentCount: 56,
			conmment: '',
			classInfo: {},
			pageTitle: '合作专区详情页',
			showSex: false,
			videoError: false,
			errorMessage: '',
			tabList: ['介绍', '评论(5)', '点赞(999)'],
			curNow: 0,
			isPlay: false,
			showPayModal: false,
			watch: false,
			content: '学习内容定时更新，随到随学',
			commentList: [],
			videoContext: null, // 新增视频上下文
			likeList: [],
			classId: '',
			conmmentId: ''
		};
	},
	onReady() {
		this.onVideoReady();
	},
	onLoad(options) {
		this.classId = options.id;
		this.pageTitle = options.title;
		this.getInfo(options.id);
		this.getCommentLst();
		this.getLikeList();
		this.calcScrollHeight();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
		}
		return {
			title: this.pageTitle, //分享的名称
			path: `/page/hangqingzixun/detail?id=${this.classId}`,
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.pageTitle,
			path: `/page/hangqingzixun/detail?id=${this.classId}`,
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	computed: {
		...mapState(['userInfo', 'pubInfoUserInfo'])
	},
	methods: {
		handleTouchStart(e) {
			e.currentTarget.classList.add('active');
		},
		handleTouchEnd(e) {
			e.currentTarget.classList.remove('active');
		},
		// 新增长按处理
		handleLongPress(message) {
			if (message.canDelete == '0' || message.canDelete == null) {
				return;
			}
			const isChild = message.parentId != '0'; // 判断是否是回复
			const action = isChild ? '删除这条回复' : '删除这条评论';
			uni.showModal({
				title: '删除确认',
				content: `确定要${action}吗？`,
				success: async (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '删除中...'
						});
						try {
							// 根据类型调用不同接口
							const apiUrl = this.$api.handleDeleteComment;
							const res = await this.$https.post(apiUrl, {
								id: message.id
							});
							if (res.code === 200) {
								// 更新本地数据
								if (isChild) {
									// 删除回复
									this.commentList.forEach((parent) => {
										parent.children = parent.children.filter((child) => child.id !== message.id);
									});
								} else {
									// 删除主评论
									this.commentList = this.commentList.filter((item) => item.id !== message.id);
								}
								// 更新总数
								uni.showToast({
									title: `删除成功`
								});
								this.getInfo(this.classId);
							}
						} catch (e) {
							console.error('删除失败:', e);
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							});
						} finally {
							uni.hideLoading();
						}
					}
				}
			});
		},
		//查看商家
		lookMarket(id) {
			uni.navigateTo({
				url: '/page/market/index?id=' + id
			});
		},
		//展开收起评论
		handleExpand(item, index) {
			if (item.expanded) {
				this.commentList[index].expanded = false;
			} else {
				this.commentList[index].expanded = true;
			}
		},
		// 触摸开始
		handleProgressTouchStart(e) {
			if (!this.duration) return;
			this.dragging = true;
			this.startX = e.touches[0].pageX;
			// 获取进度条宽度
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.bar-background')
				.boundingClientRect((rect) => {
					this.progressWidth = rect.width;
				})
				.exec();
		},
		// 触摸移动
		handleProgressTouchMove(e) {
			if (!this.dragging) return;
			const touchX = e.touches[0].pageX;
			const diffX = touchX - this.startX;
			const percent = (diffX / this.progressWidth) * 100;
			let newProgress = Math.max(0, Math.min(100, this.progress + percent));
			this.tempProgress = newProgress;
			this.tempTime = (newProgress / 100) * this.duration;
		},
		// 触摸结束
		handleProgressTouchEnd() {
			if (!this.dragging) return;
			this.dragging = false;
			this.currentTime = this.tempTime;
			this.progress = this.tempProgress;
			if (this.videoContext) {
				this.videoContext.seek(this.currentTime);
			}
		},
		//增加分享次数
		handShareCountAdd() {
			this.$https
				.post(this.$api.getShareCountAdd, {
					courseDetailId: this.classId
				})
				.then((res) => {
					if (res.code === 200) {
						this.classInfo.shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		// 输入框失去焦点处理
		onInputBlur() {
			// setTimeout(() => {
			// 	// 延迟确保键盘完全收起
			// 	if (!this.conmment && this.keyboardHeight === 0) {
			// 		this.conmment = '';
			// 		this.commentName = '';
			// 	}
			// }, 300);
		},
		//谈起对话框
		handleReply(item) {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			this.inputFocus = false; // 先重置状态
			this.commentName = '';
			this.conmmentId = '';
			this.commentName = item.briefUserInfo.nickName;
			this.conmmentId = item.id;
			this.$nextTick(() => {
				this.inputFocus = true;
				// uni.pageScrollTo({ scrollTop: 99999, duration: 300 }); // 滚动到底部
			});
		},
		moveHandle() {},
		// 新增遮罩点击处理
		handleMaskClick() {
			this.toggleComment();
			uni.hideKeyboard(); // 同时隐藏键盘
		},
		// 计算滚动区域高度
		calcScrollHeight() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollHeight = res.windowHeight * 0.65 - 120; // 650rpx高度对应计算
				}
			});
		},
		// 开关评论抽屉
		toggleComment() {
			this.commentName = '';
			this.conmmentId = '';
			this.showComment = !this.showComment;
			if (this.showComment) {
				this.$refs.commentPopup.open('bottom');
				this.$nextTick(() => {
					this.calcScrollHeight();
				});
			} else {
				this.$refs.commentPopup.close();
				uni.hideKeyboard(); //
			}
		},
		// 新增方法
		onTimeUpdate(e) {
			if (!this.dragging) {
				this.currentTime = e.detail.currentTime;
				this.progress = (this.currentTime / this.duration) * 100;
			}
		},
		onLoadedMetaData(e) {
			this.duration = e.detail.duration;
		},
		formatTime(seconds) {
			const minutes = Math.floor(seconds / 60);
			const sec = Math.floor(seconds % 60);
			return `${minutes}:${sec.toString().padStart(2, '0')}`;
		},
		// 初始化视频上下文
		initVideoContext() {
			this.videoContext = uni.createVideoContext('videoPlayer');
			this.toggleVideoPlay();
		},
		// 修改点击控制方法
		toggleVideoPlay() {
			console.log(this.videoContext, 44);
			if (!this.videoContext) {
				this.initVideoContext();
				return;
			}
			this.videoContext.play();
			this.isPlaying = !this.isPlaying;
			this.showPoster = false;
			// 使用小程序API控制
			this.isPlaying ? this.videoContext.play() : this.videoContext.pause();
		},
		// 新增视频准备回调
		onVideoReady() {
			console.log('视频已就绪');
			this.initVideoContext();
		},
		//点赞
		handleLike(index) {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			this.$https
				.post(this.$api.getCourseLike, {
					pubInfoId: this.classId,
					operateType: 3,
					processType: index == 0 ? 1 : 0
				})
				.then((res) => {
					if (res.code === 200) {
						this.getInfo(this.classId);
						this.getLikeList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		liulan() {
			const data = {
				pubInfoId: this.classId,
				operateType: '2'
			};
			this.$https.post(this.$api.viewCountAdd, data).then((res) => {
				if (res.code === 200) {
					console.log('浏览成功');
					this.classInfo.viewCount = this.classInfo.viewCount + 1;
				} else {
					console.log('浏览失败');
				}
			});
		},
		//获取信息
		getInfo(id) {
			uni.showLoading({
				title: '加载中'
			});
			this.$https
				.post(this.$api.getClassDetail, {
					id: id
				})
				.then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classInfo = res.data;
						this.tabList = [
							{
								name: '评论' + '(' + res.data.commentCount + ')'
							},
							{
								name: '点赞' + '(' + res.data.likeCount + ')'
							}
						];
						this.liulan();
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		sectionChange(index) {
			this.inputFocus = false;
			this.commentName = '';
			this.conmmentId = '';
			this.curNow = index;
		},
		handleCancel() {
			uni.navigateBack({
				delta: 1 // 返回的页面层级，1表示返回上一页
			});
		},
		//获取评论
		getCommentLst() {
			this.commentList = [];
			this.$https
				.post(this.$api.getCourseDetailComment, {
					courseDetailId: this.classId,
					pageNum: 1,
					pageSize: 100
				})
				.then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						// this.commentList = res.data;
						res.data.forEach((item) => {
							item.expanded = false;
							this.commentList.push(item);
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//点赞列表
		getLikeList() {
			this.$https
				.post(this.$api.getCourseLikeList, {
					id: this.classId
				})
				.then((res) => {
					if (res.code === 200) {
						this.likeList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//发生评论
		handleSend() {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			if (!this.conmment) {
				return uni.showToast({
					title: '请输入评论消息',
					icon: 'none'
				});
			}
			console.log(this.conmment);
			uni.showLoading({
				title: '发送中'
			});
			this.$https
				.post(this.$api.getAddComment, {
					parentId: this.commentName ? this.conmmentId : '',
					commentInfo: this.conmment,
					courseDetailId: this.classInfo.id
				})
				.then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
						this.conmment = '';
						this.commentName = '';
						this.conmmentId = '';
						this.getCommentLst();
						this.getInfo(this.classId);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		// 点击自定义播放按钮
		onCustomPlay() {
			if (!this.hasPaid) {
				// 显示支付弹框
				this.showPayModal = true;
			} else {
				// 已支付，直接播放视频
				this.playVideo();
			}
		},
		// 支付确认
		onPayConfirm() {
			uni.navigateTo({
				url: `/page/kaitonghuiyuan/index`
			});
			// 模拟支付逻辑
			// this.showPayModal = false;
			// this.hasPaid = true;
			// this.watch = true;
			// // 支付完成后自动播放视频
			// this.playVideo();
		},
		// 支付取消
		onPayCancel() {
			this.showPayModal = false;
		},
		// 控制视频播放
		playVideo() {
			const video = this.$refs.myVideo;
			if (video) {
				video.play();
			}
		},
		// 视频播放事件回调（可选）
		onVideoPlay() {
			console.log('视频开始播放');
		}
	}
};
</script>
<style lang="scss" scoped>
/* 新增样式 */
.progress-bar {
	position: absolute;
	bottom: 30rpx;
	left: 20rpx;
	right: 20rpx;
	z-index: 60;
}

.bar-background {
	height: 8rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4rpx;
}

.current-progress {
	height: 100%;
	background: #fff;
	border-radius: 4rpx;
	transition: width 0.3s;
}

.time-display {
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
	color: #fff;
	font-size: 24rpx;
	opacity: 0.8;
}

/* 添加进度条交互样式 */
.bar-background {
	position: relative;
}

.current-progress {
	position: absolute;
	left: 0;
	top: 0;
	transition: width 0.1s linear;
}

/* 添加进度条点击跳转功能 */
.bar-background::before {
	content: '';
	position: absolute;
	top: -10rpx;
	bottom: -10rpx;
	left: 0;
	right: 0;
	z-index: 1;
}

.my_container {
	width: 100%;

	.t-wrap {
		text-align: center;

		.t-middle {
			margin-top: 30rpx;
			height: 116rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 34rpx;
			color: #ff4400;
			line-height: 58rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.b-middle {
		margin-top: 10rpx;
		text-align: center;
		font-size: 24rpx;
		text-decoration: underline;
	}

	.custom-pause {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
	}

	.my_container_body_head {
		width: 686rpx;
		height: 176rpx;
	}

	.my_container_body {
		width: 750rpx;
		background: linear-gradient(180deg, #ddffde 0%, #ffffff 29%, #ffffff 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		height: 100%;

		.my_container_body_body {
			width: 686rpx;
			margin-left: 32rpx;

			.videoShow {
				width: 686rpx;
				height: 380rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.custom-play-button {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
			}

			.pay-modal {
				position: fixed;
				top: 25%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
				padding: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				z-index: 20;
			}

			.pay-modal .buttons {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
			}

			.videoShowitem {
				height: 38rpx;
				display: flex;
				margin-top: 24rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				height: 38rpx;
				line-height: 38rpx;

				image {
					width: 38rpx;
					height: 38rpx;
				}

				:nth-child(2) {
					width: 250rpx;
					margin-left: 4rpx;
				}

				:nth-child(3) {
					width: 200rpx;
					margin-left: 30rpx;
				}

				:nth-child(4) {
					margin-left: 80rpx;
				}

				:nth-child(5) {
					margin-left: 30rpx;
					// margin-left: 200rpx;
				}
			}

			.check_tiem {
				width: 686rpx;
				margin-top: 34rpx;
			}

			.fotter {
				margin-top: 12rpx;

				.jieshao {
					width: 686rpx;

					view {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 50rpx;
						text-align: left;
					}

					image {
						width: 686rpx;
						height: 240rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-top: 24rpx;
					}
				}

				.pinlun {
					padding-bottom: 240rpx;

					.p-wrap {
						margin-top: 40rpx;
						display: flex;

						.p-cover {
							width: 60rpx;
							height: 60rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}

						.p-right {
							margin-left: 6rpx;
							flex: 1;

							.p-name {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								font-style: normal;
								text-transform: none;
							}

							.p-time {
								margin: 6rpx 0;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-size: 20rpx;
								color: #777777;
							}

							.p-content {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.p-foot {
								display: flex;
								justify-content: space-between;

								.p-data {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-address {
									margin-left: 14rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-btn {
									justify-content: flex-end;
									width: 50rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #19e820;
								}
							}
						}
					}

					.p-input {
						background-color: #fff;
						bottom: 0rpx;
						padding-bottom: 50rpx;
						position: fixed;
						display: flex;

						::v-deep .u-input {
							width: 512rpx;
						}

						button {
							font-size: 30rpx;
							margin-left: 20rpx;
							width: 148rpx;
							height: 80rpx;
							background: #1ee825;
							border-radius: 112rpx 112rpx 112rpx 112rpx;
						}
					}
				}

				.dianzan {
					padding-bottom: 60rpx;

					// .chat-custom-text {
					// 	width: 36rpx;
					// 	height: 36rpx;
					// }
					.p-wrap {
						margin-top: 40rpx;
						display: flex;

						.p-cover {
							width: 60rpx;
							height: 60rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}

						.p-right {
							margin-left: 6rpx;
							flex: 1;

							.p-name {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								font-style: normal;
								text-transform: none;
							}

							.p-time {
								margin: 6rpx 0;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-size: 20rpx;
								color: #777777;
							}

							.p-content {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.p-foot {
								display: flex;
								justify-content: space-between;

								.p-data {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-address {
									margin-left: 14rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-btn {
									justify-content: flex-end;
									width: 50rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #19e820;
								}
							}
						}
					}
				}
			}
		}
	}
}

.video-container {
	width: 100vw;
	height: calc(100vh - 176rpx);
	position: relative;
	background: #1a1a1a;

	.fullscreen-video {
		width: 100%;
		height: 100%;
	}

	.overlay-layer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 50;
	}

	/* 顶部横幅样式 */
	.banner-box {
		position: relative;

		.banner-text {
			color: #fff;
			font-size: 36rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
			z-index: 2;
			position: relative;
		}

		.blur-background {
			position: absolute;
			top: -20rpx;
			left: -20rpx;
			right: -20rpx;
			bottom: -20rpx;
			background: rgba(255, 0, 0, 0.3);
			filter: blur(20rpx);
		}
	}

	/* 用户信息区块 */
	.user-info {
		margin-bottom: 60rpx;

		.username {
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
		}

		.timestamp {
			color: #ddd;
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.tags {
			margin-top: 20rpx;

			.tag {
				display: inline-block;
				background: rgba(255, 255, 255, 0.15);
				color: #fff;
				padding: 8rpx 20rpx;
				border-radius: 40rpx;
				margin-right: 15rpx;
				font-size: 26rpx;
			}
		}
	}

	/* 右侧互动栏 */
	.interaction-column {
		width: 110rpx;
		position: absolute;
		right: 20rpx;
		bottom: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			margin-bottom: 40rpx;
		}

		.action-item {
			margin: 30rpx 0;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
				width: 70rpx;
				height: 70rpx;
				display: block;
				filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
			}

			.icon2 {
				width: 60rpx;
				height: 60rpx;
			}

			.count {
				color: #fff;
				font-size: 24rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}

			.hidden-share-btn {
				position: absolute;
				top: 0;
				left: 0;
				width: 70rpx;
				height: 100rpx;
				opacity: 0;
				z-index: 2;
			}
		}
	}

	/* 悬浮问卷 */
	.floating-poll {
		position: absolute;
		left: 30rpx;
		bottom: 200rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 16rpx;
		padding: 20rpx;

		.poll-title {
			color: #333;
			font-size: 28rpx;
			margin-bottom: 15rpx;
		}

		.poll-option {
			background: #ff4444;
			color: #fff;
			margin: 10rpx 0;
			border-radius: 40rpx;
		}
	}

	/* 评论抽屉 */
	/* 弹出层容器 */
	.comment-popup-wrapper {
		height: 500rpx;

		::v-deep .uni-popup__wrapper {
			pointer-events: none !important;
			/* 禁止穿透 */
		}

		.comment-drawer {
			pointer-events: auto !important;
			/* 允许内部交互 */
		}
	}

	/* 抽屉主体 */
	.comment-drawer {
		background: #fff;
		height: 800rpx;
		display: flex;
		flex-direction: column;

		/* 头部 */
		.comment-header {
			padding: 32rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.close-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		/* 评论列表 */
		.comment-list {
			height: calc(800rpx - 200rpx);
			padding: 0 32rpx;

			.comment-item {
				padding: 24rpx 0;
				display: flex;
				border-bottom: 1rpx solid #f5f5f5;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}

				.content {
					flex: 1;

					.content-item {
						/* 默认样式 */
						background-color: transparent;
						transition: background-color 0.3s;

						/* 添加过渡效果使变化更平滑 */
						&:active {
							/* 长按或按住时的样式 */
							background-color: #dddddd;
							/* 设置为想要的背景颜色 */
						}
					}

					.username {
						font-size: 28rpx;
						color: #666;
						margin-right: 16rpx;
					}

					.time {
						font-size: 24rpx;
						color: #999;
					}

					.text {
						display: block;
						font-size: 28rpx;
						margin-top: 8rpx;
					}

					.like-time {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #999;

						.time {
							font-size: 24rpx;
							margin-right: 20rpx;
						}

						.text {
							margin: 0;
							font-size: 24rpx;
						}
					}

					.child-content {
						margin-top: 10rpx;
						/* 默认样式 */
						background-color: transparent;
						transition: background-color 0.3s;

						/* 添加过渡效果使变化更平滑 */
						&:active {
							/* 长按或按住时的样式 */
							background-color: #dddddd;
							/* 设置为想要的背景颜色 */
						}

						.c-head {
							display: flex;

							.c-cover {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.c-name {
								margin-left: 10rpx;
								font-size: 24rpx;
								color: #616161;

								text {
									margin-left: 6rpx;
									color: #999;
								}
							}
						}

						.c-content {
							margin-top: 6rpx;
							font-size: 28rpx;
						}
					}

					.expand-btn {
						padding: 10rpx 0;
						font-size: 22rpx;
						color: #75767a;
					}
				}

				.c-btn {
					margin-top: 30rpx;
					display: flex;
					// align-items: center;
					font-size: 26rpx;
					color: #19e820;
				}
			}
		}

		/* 输入区域 */
		.input-area {
			height: 100rpx;
			padding: 20rpx 32rpx;
			border-top: 1rpx solid #eee;
			display: flex;
			align-items: center;
			z-index: 102;

			.comment-input {
				flex: 1;
				height: 80rpx;
				padding: 0 32rpx;
				background: #f5f5f5;
				border-radius: 40rpx;
				font-size: 28rpx;
			}

			.send-btn {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 20rpx;
			}
		}
	}
}
</style>
